<template>
  <div class="form-group" v-if="subject">
    <label>知识点选择：</label>
    <div class="knowledge-points">
      <div class="subject-knowledge">
        <h4>{{ subject }}</h4>
        <div v-if="knowledgePoints.length > 0" class="checkbox-group">
          <label 
            class="checkbox-item" 
            v-for="point in knowledgePoints" 
            :key="point"
          >
            <input 
              type="checkbox" 
              :value="point" 
              :checked="modelValue.includes(point)"
              @change="updateValue(point, $event.target.checked)"
            />
            <span>{{ point }}</span>
          </label>
        </div>
        <div v-else class="no-knowledge-points">
          <p>暂无相关知识点</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, watch } from 'vue'
import { useConfig } from '../../composables/useConfig.js'

export default {
  name: 'KnowledgePointSelector',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    subject: {
      type: String,
      default: ''
    },
    grade: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup(props) {
    const { 
      knowledgePoints, 
      loadConfig, 
      getKnowledgePointsBySubjectAndGrade 
    } = useConfig()

    const currentKnowledgePoints = computed(() => {
      if (!props.subject || !props.grade) return []
      return getKnowledgePointsBySubjectAndGrade(props.subject, props.grade)
    })

    // 组件挂载时加载配置
    onMounted(async () => {
      try {
        await loadConfig()
      } catch (error) {
        console.warn('知识点选择器配置加载失败:', error)
      }
    })

    return {
      knowledgePoints: currentKnowledgePoints
    }
  },
  methods: {
    updateValue(point, checked) {
      let newValue = [...this.modelValue]
      
      if (checked) {
        if (!newValue.includes(point)) {
          newValue.push(point)
        }
      } else {
        newValue = newValue.filter(p => p !== point)
      }
      
      this.$emit('update:modelValue', newValue)
    }
  }
}
</script>

<style scoped>
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.knowledge-points {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  background: #f8fafc;
}

.subject-knowledge h4 {
  color: #4a5568;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: normal;
}

.checkbox-item:hover {
  background-color: rgba(102, 126, 234, 0.05);
}

.checkbox-item input[type="checkbox"] {
  margin: 0;
}

.checkbox-item input[type="checkbox"]:checked + span {
  color: #667eea;
  font-weight: 600;
}

.no-knowledge-points {
  text-align: center;
  padding: 2rem;
  color: #a0aec0;
}

.no-knowledge-points p {
  margin: 0;
  font-style: italic;
}
</style>